<template>
	<view class="container">
		<block v-for="(item,index) in msgList" :key="index">
			<tui-list-cell @click="detail(item.chatId)" :unlined="true">
				<view class="tui-chat-item">
					<view class="tui-msg-box">
						<image :src="item.imgUrl" class="tui-msg-pic" mode="widthFix"></image>
						<view class="tui-msg-item">
							<view class="tui-msg-name">{{item.name}}</view>
							<view class="tui-msg-content">{{item.latestMsg?item.latestMsg.content:""}}</view>
						</view>
					</view>
					<view class="tui-msg-right" :class="[item.level==3?'tui-right-dot':'']">
						<view class="tui-msg-time">{{item.latestTime}}</view>
						<tui-badge type="danger"  v-if="item.hasNew">new</tui-badge>
					</view>
				</view>
			</tui-list-cell>
		</block>
		<div v-if="msgList.length==0">
			<tui-nomore text="暂时没有聊天或每人来加入已创建的聊天,前去我的进行创建聊天"></tui-nomore>
		</div>
		<view class="tui-safearea-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				msgList: [],
			}
		},
		async created(){
			let res = await this.api.public.getChatList();
			uni.showToast({
				title:res.content,
				duration:500,
				icon:"none"
			});
			if(res.status){
				this.msgList = res.data; 
			};
			this.msgList.forEach(item=>{
				item.imgUrl = this.url+'/'+item.imgUrl;
			});
		},
		mounted(){
			//注册socketId
			let token = uni.getStorageSync('token');
			this.$socket.emit('chatInit',{token:token});
		},
		sockets:{
			chatInit(res){
				console.log(res.content);
			},
			chat(res){
				console.log(res);
				this.msgList.forEach(item=>{
					if(item.chatId==res.chatId){
						if(item.latestMsg){
							item.latestMsg = res;
						}
						item.hasNew = true;
					}
				})
			}
		},
		methods: {
			detail: function(id) {
				uni.navigateTo({
					url: `./chat?chatId=${id}`,
				})
			},
		},
		onPullDownRefresh: async function() {
			let res = await this.api.public.getChatList();
			uni.showToast({
				title:'更新成功',
				duration:500,
				icon:"none"
			});
			if(res.status){
				this.msgList = res.data; 
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx
	}

	/*tabbar*/

	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background-color: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d2d2d2;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #00c0fb !important;
	}

	/*tabbar*/

	/*searchbox*/

	.tui-searchbox {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tui-search-input {
		width: 100%;
		height: 72rpx;
		background: #fafafa;
		border-radius: 36rpx;
		font-size: 30rpx;
		color: #A8ABB8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-search-text {
		padding-left: 16rpx;
	}

	/*searchbox*/

	.tui-chat-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76rpx;
		padding-bottom: 10rpx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
</style>
